<template>
  <div class="content-in">
    <div class="banner bg1">
      <h1>{{ $t('product.bg1Title') }}</h1>
      <p>{{ $t('product.bg1SubTitle') }}</p>
      <p>{{ $t('product.bg1SubTitle2') }}</p>
    </div>
    <h1 class="d-title">{{ $t('product.bg1Title') }}</h1>
    <swiper-app :navbars="productToObj['工业智能终端']" index="0"></swiper-app>
    <div class="banner bg2">
      <h1>{{ $t('product.bg2Title') }}</h1>
      <p class="white">{{ $t('product.bg2SubTitle') }}</p>
    </div>
    <h1 class="d-title">{{ $t('product.bg2Title') }}</h1>
    <swiper-app :navbars="productToObj['高精度测绘和导航']" index="1"></swiper-app>
    <div class="banner bg3">
      <h1>{{ $t('product.bg3Title') }}</h1>
      <p class="white">{{ $t('product.bg3SubTitle') }}</p>
    </div>
    <h1 class="d-title">{{ $t('product.bg3Title') }}</h1>
    <swiper-app :navbars="productToObj['生物识别与应用']" index="2"></swiper-app>
    <div class="banner bg4">
      <h1>{{ $t('product.bg4Title') }}</h1>
      <p class="white">{{ $t('product.bg4SubTitle') }}</p>
    </div>
    <h1 class="d-title">{{ $t('product.bg4Title') }}</h1>
    <swiper-app :navbars="productToObj['智能物联和RFID']" index="3"></swiper-app>
    <div class="banner bg5">
      <h1>{{ $t('product.bg5Title') }}</h1>
      <p class="white">{{ $t('product.bg5SubTitle') }}</p>
    </div>
    <h1 class="d-title">{{ $t('product.bg5Title') }}</h1>
    <swiper-app :navbars="productToObj['防爆终端和设备']" index="5"></swiper-app>
    <div class="banner bg6">
      <h1>{{ $t('product.bg6Title') }}</h1>
      <p class="white">{{ $t('product.bg6SubTitle') }}</p>
    </div>
    <h1 class="d-title">{{ $t('product.bg6Title') }}</h1>
    <swiper-app :navbars="productToObj['户外运动装备和其他']" index="6"></swiper-app>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import SwiperApp from './swiper-app.vue'
import * as api from '@/const/api'

export default {
  components: {
    SwiperApp,
  },
  props: {},
  data() {
    return {
      products: [],
    }
  },
  computed: {
    ...mapState(['isZh']),
    ...mapGetters(['capitalizeLang']),
    productToObj() {
      const obj = {
        工业智能终端: [],
        高精度测绘和导航: [],
        生物识别与应用: [],
        智能物联和RFID: [],
        防爆终端和设备: [],
        户外运动装备和其他: [],
      }

      this.products.forEach((item) => {
        obj[item.classificationNameZh].push(item)
      })
      return obj
    },
  },
  mounted() {
    this.goProductPage()
  },
  methods: {
    async goProductPage() {
      try {
        this.loading = true
        const { code, msg, data } = await this.$axios.$post(api.solutionPage, {
          pageNo: 1,
          pageSize: 200,
          solutionClassificationType: 2,
        })

        if (+code !== 200) {
          throw new Error(msg || this.$t('common.form.error'))
        }
        this.products = data.list || []
      } catch (err) {
        this.$message.error(err.message)
      } finally {
        this.loading = false
      }
    },
    async toPage(item) {
      if (!item.url) {
        return
      }

      this.$router.push({
        path: '/solution',
        query: {
          id: item.url,
          type: item.classificationType,
        },
      })
    },
    async toContactUs() {
      if (this.isZh) {
        window.open('https://work.weixin.qq.com/ca/cawcdec2e016c3c426')
      } else {
        window.open('https://wa.me/8617782030739')
      }
    },
  },
}
</script>

<style lang="less" scoped>
.banner {
  display: flex;
  flex-direction: column;
  height: 340px;
  padding: 50px 0 0 40px;

  h1 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    margin: 0 0 20px 0;
  }

  p {
    font-size: 22px;
    margin: 4px 0 0 0;
    font-weight: bold;

    &.white {
      color: #fff;
    }
  }

  &.bg1 {
    background-image: url(@/assets/images/product/bg01.png);
    background-size: contain;
  }

  &.bg2 {
    background-image: url(@/assets/images/product/bg02.png);
    background-size: contain;
  }

  &.bg3 {
    background-image: url(@/assets/images/product/bg03.png);
    background-size: contain;
  }

  &.bg4 {
    background-image: url(@/assets/images/product/bg04.png);
    background-size: contain;
  }

  &.bg5 {
    background-image: url(@/assets/images/product/bg05.png);
    background-size: contain;
  }

  &.bg6 {
    background-image: url(@/assets/images/product/bg06.png);
    background-size: contain;
  }
}

.d-title {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  padding: 54px 24px 32px 24px;
}
</style>
